<template>
    <div class="page-container">
        <div class="top-container">
            <el-button type="primary" @click="handleNewTask" class="custom-button">返回</el-button>
            <div class="right-section">
                <el-button type="success" @click="handlePublish" class="custom-button">发布</el-button>
                <el-button type="danger" @click="handleDelete" class="custom-button">删除</el-button>
                <el-popover placement="bottom" trigger="click" width="260">
                    <div class="popover-download-row">
                        <el-button type="primary" @click="handleDownloadToPC" size="small" class="download-btn">下载到电脑</el-button>
                        <el-button type="success" @click="handleDownloadToMobile" size="small" class="download-btn">下载到手机</el-button>
                    </div>
                    <template #reference>
                        <el-button type="warning" class="custom-button">下载</el-button>
                    </template>
                </el-popover>
            </div>
        </div>
        <div class="content-wrapper">
            <div class="content-list">
                <el-row :gutter="24">
                    <el-col
                        v-for="item in pageData"
                        :key="item.id"
                        :xs="24"
                        :sm="12"
                        :md="8"
                        :lg="6"
                        style="display: flex; justify-content: center; align-items: center; margin-bottom: 24px;"
                    >
                        <div class="card pretty-card">
                            <div class="card-checkbox">
                                <el-checkbox
                                    :model-value="selectedItems.includes(item.id)"
                                    @change="() => handleSelectItem(item.id)"
                                />
                            </div>
                            <div class="pretty-img-wrapper">
                                <img :src="item.url || ''" class="pretty-img" />
                            </div>
                            <div class="pretty-time-bar">
                                <span class="pretty-time">{{ item.create_time }}</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="pagination-bar">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                    :page-sizes="[10,20,50,100]"
                />
            </div>
        </div>

        <!-- 发布设置弹窗 -->
        <MyDialog
            v-model="showPublishDialog"
            title="发布设置"
            width="600px"
            :modal="true"
            :close-on-click-modal="false"
            @confirm="handlePublishConfirm"
            @cancel="handlePublishCancel"
        >
            <div class="publish-form">
                <!-- 发布类型 -->
                <div class="form-section">
                    <div class="section-label">发布类型</div>
                    <div class="publish-type-buttons">
                        <button
                            :class="['type-btn', publishForm.publishType === 'douyin' ? 'active' : '']"
                            @click="publishForm.publishType = 'douyin'"
                        >
                            抖音发布
                        </button>
<!--                        <button
                            :class="['type-btn', publishForm.publishType === 'xiaohongshu' ? 'active' : '']"
                            @click="publishForm.publishType = 'xiaohongshu'"
                        >
                            小红书发布
                        </button>-->
                    </div>
                </div>

                <!-- 活动名称 -->
                <div class="form-section">
                    <div class="section-label">活动名称</div>
                    <el-input
                        v-model="publishForm.activityName"
                        placeholder="请输入活动名称"
                        class="form-input"
                    />
                </div>

                <!-- 标题 -->
                <div class="form-section">
                    <div class="section-label">标题</div>
                    <el-input
                        v-model="publishForm.title"
                        type="textarea"
                        :rows="2"
                        placeholder="发布时标题会自动携带(数字人请手动录入)"
                        class="form-input"
                    />
                </div>

                <!-- 话题 -->
                <div class="form-section">
                    <div class="section-label">话题</div>
                    <el-input-tag
                        v-model="publishForm.topic"
                        placeholder="请输入话题，按回车添加"
                        class="form-input"
                    />
                    <div class="form-tip">
                      <el-icon><InfoFilled /></el-icon>
                      一行代表一个话题
                    </div>
                </div>

                <!-- 挂载 -->
                <div class="form-section" v-if="publishForm.publishType === 'douyin'">
                    <div class="section-label">挂载</div>
                    <div class="mount-buttons">
                        <button
                            :class="['mount-btn', publishForm.mount === 'none' ? 'active' : '']"
                            @click="publishForm.mount = 'none'"
                        >
                            无
                        </button>
                        <button
                            :class="['mount-btn', publishForm.mount === 'poi' ? 'active' : '']"
                            @click="publishForm.mount = 'poi'"
                        >
                            POI地址/团购
                        </button>
                        <button
                            :class="['mount-btn', publishForm.mount === 'miniprogram' ? 'active' : '']"
                            @click="publishForm.mount = 'miniprogram'"
                        >
                            小程序
                        </button>
                    </div>
                </div>
                <!-- POI -->
                <div class="form-section" v-if="publishForm.publishType === 'douyin' && publishForm.mount === 'poi'">
                    <div class="section-label">挂载内容</div>
                    <div style="display: flex; gap: 8px; width: 100%;">
                        <el-input v-model="publishForm.poi1" placeholder="请输入关键词" style="flex:1;" />
                        <el-input v-model="publishForm.poi2" placeholder="请输入城市" style="flex:1;" />
                        <el-button icon="el-icon-search" type="primary" @click="handleChooseCityKeyWord">搜索</el-button>
                    </div>
                    <div style="margin-top: 8px;">
                        <el-select v-model="publishForm.poiSelect" placeholder="请选择" style="width: 100%;">
                            <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                </div>
                <!-- 小程序 -->
                <div class="form-section" v-if="publishForm.publishType === 'douyin' && publishForm.mount === 'miniprogram'">
                    <div class="section-label">挂载内容</div>
                    <el-input v-model="publishForm.miniId" placeholder="例如：ttef91b112671b152ba ID" style="margin-bottom: 8px;" />
                    <el-input v-model="publishForm.miniTitle" placeholder="请输入小程序标题" style="margin-bottom: 8px;" />
                    <el-input v-model="publishForm.miniPath" placeholder="例如：path/pages/index" />
                </div>
                <!-- 数据获取 -->
                <div class="form-section" v-if="publishForm.publishType === 'douyin'">
                    <div class="section-label">数据获取</div>
                    <div class="data-acquisition-row">
                        <el-switch
                            v-model="publishForm.dataAcquisition"
                            active-color="#409EFF"
                        />
                        <div class="form-tip">
                            <el-icon><InfoFilled /></el-icon>
                            打开数据获取后,需要用户确定授权
                        </div>
                    </div>
                </div>

                <!-- 随机图片数量 -->
                <div class="form-section">
                    <div class="section-label">随机图片数量</div>
                    <el-input-number
                        v-model="publishForm.picnums"
                        :min="0"
                        :max="9999"
                        class="scan-limit-input"
                    />
                </div>

                <!-- 扫码数量限制 -->
                <div class="form-section">
                    <div class="section-label">扫码数量限制</div>
                    <el-input-number
                        v-model="publishForm.scanCodeLimit"
                        :min="0"
                        :max="9999"
                        class="scan-limit-input"
                    />
                </div>
            </div>
        </MyDialog>

        <!-- 二维码显示弹窗 -->
        <MyDialog
            v-model="showQrCodeDialog"
            title="请扫码发布"
            width="600px"
            :modal="true"
            :close-on-click-modal="false"
            @confirm="handleQrCodeConfirm"
            @cancel="handleQrCodeConfirm"
        >
            <!-- 二维码显示区域 -->
            <div class="form-section" v-if="douyinQrCode || redBookAndroidQrCode || redBookIOSQrCode">
                <div class="qr-code-container">
                    <!-- 抖音二维码 -->
                    <div v-if="douyinQrCode" class="qr-code-item">
                        <div class="qr-code-title">抖音二维码</div>
                        <img :src="douyinQrCode" alt="抖音二维码" class="qr-code-image" />
                    </div>
                    <!-- 小红书Android二维码 -->
                    <div v-if="redBookAndroidQrCode" class="qr-code-item">
                        <div class="qr-code-title">小红书Android二维码</div>
                        <img :src="redBookAndroidQrCode" alt="小红书Android二维码" class="qr-code-image" />
                    </div>
                    <!-- 小红书iOS二维码 -->
                    <div v-if="redBookIOSQrCode" class="qr-code-item">
                        <div class="qr-code-title">小红书iOS二维码</div>
                        <img :src="redBookIOSQrCode" alt="小红书iOS二维码" class="qr-code-image" />
                    </div>
                </div>
            </div>
                 </MyDialog>

         <!-- 手机下载弹窗 -->
         <MyDialog v-model="showMobileDownloadDialog" width="420px" @confirm="handleDownloadConfirm" title="请使用手机扫码下载">
             <div style="text-align:center; padding: 16px 0;">
                 <img src="/pictureDownLoadPhone.png" alt="二维码" style="width:180px; height:180px;" />
             </div>
         </MyDialog>
     </div>
 </template>

<script setup lang="ts">
import { onMounted, ref, defineProps, defineEmits } from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import { Search, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import utils from '../../utils/utils'
import MyDialog from '../common/MyDialog.vue'
import QRCode from 'qrcode'

//主题控制light  dark
const theme = utils.getTheme();

const props = defineProps<{
    videoId: number
}>()

const emit = defineEmits(['back'])

const videoType = ref('')
const searchText = ref('')
const selectedItems = ref<number[]>([])
const isAllSelected = ref(false)
const currentPlayingVideo = ref<number | null>(null)

const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)
const pageData = ref([])
const loading = ref(false)

// 发布相关状态
const showPublishDialog = ref(false)
const showQrCodeDialog = ref(false)

// 下载相关状态
const showMobileDownloadDialog = ref(false)
const publishForm = ref({
    publishType: 'douyin', // douyin 或 xiaohongshu
    activityName: '',
    title: '',
    topic: [], // Changed to array for InputTag
    mount: 'none', // none, poi, miniprogram
    dataAcquisition: false,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
})

const cityData = ref([])
const douyinQrCode = ref("")
const redBookAndroidQrCode = ref("")
const redBookIOSQrCode = ref("")

const fetchList = async () => {
  loading.value = true
  const response = await axiosUtil.post('api/aliyun_tongyi/wan_xiang/query_image_task', {
    id: props.videoId
  })
  loading.value = false
  if (response.data.code === 1 && response.data.data.list) {
    pageData.value = response.data.data.list
    total.value = response.data.data.all_handle || 0
  }
}

onMounted(() => {
  document.body.classList.remove('login-page')
  fetchList()
})

const handleNewTask = () => {
  emit('back')
}

const handlePublish = () => {
  if (selectedItems.value.length === 0) {
    ElMessage.warning('请选择要发布的图片')
    return
  }
  showPublishDialog.value = true
}

const handleDelete = async () => {
  // 处理删除
  if(selectedItems.value.length > 0) {
    try {
      const response = await axiosUtil.post("api/aliyun_tongyi/wan_xiang/image_item_delete", {
        "ids": selectedItems.value
      })
      if(response.data.code === 1) {
        ElMessage.success('删除成功')
        // 清空选中的项目
        selectedItems.value = []
        // 刷新列表
        await fetchList()
      } else {
        ElMessage.error('删除失败')
      }
    } catch (error) {
      console.error('删除失败:', error)
      ElMessage.error('删除失败，请重试')
    }
  } else {
    ElMessage.warning('请选择要删除的图片')
    return
  }
}

const handleDownloadToPC = async () => {
  // 检查是否有选中的项目
  if (selectedItems.value.length === 0) {
    ElMessage.warning('请先选择要下载的图片');
    return;
  }

  // 获取选中项目的图片URL
  const arr = [];
  selectedItems.value.forEach(selectedId => {
    const item = pageData.value.find(pic => pic.id === selectedId);
    if (item && item.url) {
      arr.push(item.url);
    }
  });

  if (arr.length === 0) {
    ElMessage.warning('没有找到可下载的图片');
    return;
  }

  console.log('准备下载的图片:', arr);

  // 显示下载进度
  ElMessage.info(`开始下载 ${arr.length} 个图片文件...`);

  // 使用更优雅的下载方法，避免新窗口闪烁
  for (let i = 0; i < arr.length; i++) {
    const imageUrl = arr[i];
    if (imageUrl) {
      try {
        // 使用当前时间作为文件名
        const now = new Date();
        const timestamp = now.getTime();
        const fileName = `image_${timestamp}_${i + 1}.jpg`;

        // 使用隐藏的 iframe 进行静默下载，完全避免新窗口
        const iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.style.position = 'absolute';
        iframe.style.left = '-9999px';
        iframe.style.top = '-9999px';
        iframe.style.width = '1px';
        iframe.style.height = '1px';

        // 设置 iframe 的 src 来触发下载
        iframe.src = imageUrl;
        document.body.appendChild(iframe);

        // 延迟后移除 iframe，避免内存泄漏
        setTimeout(() => {
          if (document.body.contains(iframe)) {
            document.body.removeChild(iframe);
          }
        }, 2000);

        // 增加延迟时间，确保每个下载都能完成
        await new Promise(resolve => setTimeout(resolve, 1000));

        ElMessage.success(`已下载: ${fileName}`);
      } catch (error) {
        console.error('下载失败:', error);
        ElMessage.error(`下载失败: ${imageUrl}`);
      }
    }
  }

  if (arr.length > 0) {
    ElMessage.success(`批量下载完成，共 ${arr.length} 个图片`);
  }
}

const handleDownloadToMobile = () => {
  showMobileDownloadDialog.value = true
}

const handleDownloadConfirm = () => {
  showMobileDownloadDialog.value = false
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  fetchList()
}
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchList()
}

// 搜索和筛选
const handleSearch = () => {
  currentPage.value = 1
  fetchList()
}
const handleTypeChange = () => {
  currentPage.value = 1
  fetchList()
}

const handleSelectAll = () => {
  if (isAllSelected.value) {
    selectedItems.value = pageData.value.map(item => item.id)
  } else {
    selectedItems.value = []
  }
}

const handleSelectItem = (id: number) => {
  const index = selectedItems.value.indexOf(id)
  if (index === -1) {
    selectedItems.value.push(id)
  } else {
    selectedItems.value.splice(index, 1)
  }
  // 更新全选状态
  isAllSelected.value = selectedItems.value.length === pageData.value.length
}

const handleVideoClick = (item: any) => {
    // 移除点击播放视频逻辑
}

// 发布设置弹窗处理方法
const handlePublishConfirm = async () => {
  console.log('发布设置确认', publishForm.value)
  let photos = ''
  let arr = []

  // 获取选中的图片URL
  if(selectedItems.value.length > 0) {
    selectedItems.value.forEach(selectedId => {
      const item = pageData.value.find(pic => pic.id === selectedId)
      if (item && item.url) {
        arr.push(item.url)
      }
    })
  } else {
    ElMessage.warning('请选择要发布的图片')
    return
  }

  photos = arr.join(",")

  // TODO: 在这里处理发布逻辑
  let url = ''
  let data: any = {
    "title": publishForm.value.activityName,
    "video_text": publishForm.value.title,
    "video_text_keyword": publishForm.value.topic,
    "platform_type": "none",
    "micro_app_info": {
      "micro_app_id": "",
      "micro_app_title": "",
      "micro_app_url": ""
    },
    "open_data": publishForm.value.dataAcquisition?1:0,
    "video_list": "",
    "max_release_num": publishForm.value.scanCodeLimit,
    "type": "images",
    "photos": photos,
    "photos_num": publishForm.value.picnums,
    "id": ""
  }

  if(publishForm.value.publishType === 'douyin'){
    url = 'api/scan_publish/douyin/save';
    // 处理POI挂载
    if(publishForm.value.mount === 'poi'){
      if(!publishForm.value.poiSelect){
        ElMessage.warning("请先选择数据")
        return
      }else {
        const selectArr = cityData.value.find(item => item.value === publishForm.value.poiSelect)
        if(selectArr){
          data.mount_type = 'poi'
          data.poi_id = selectArr.value
          data.poi_name = selectArr.label
        }
      }
    }

    // 处理小程序挂载
    if(publishForm.value.mount === 'miniprogram'){
      if(!publishForm.value.miniId){
        ElMessage.warning("请先输入小程序ID")
        return
      }
      if(!publishForm.value.miniTitle){
        ElMessage.warning("请先输入标题")
        return
      }
      if(!publishForm.value.miniPath){
        ElMessage.warning("请先输入路径")
        return
      }
      data.mount_type = 'mini_program'
      data.micro_app_info.micro_app_id = publishForm.value.miniId
      data.micro_app_info.micro_app_title = publishForm.value.miniTitle
      data.micro_app_info.micro_app_url = publishForm.value.miniPath
    }
  }else {
    url = 'api/scan_publish/xhs/save'
  }

  try {
    const response = await axiosUtil.post(url, data)
    if(response.data.code === 1) {
      ElMessage.success(response.data.msg)
      const qr_code = response.data.data.qr_code
      if(publishForm.value.publishType === 'douyin'){
        // 将地址转换为二维码图片
        douyinQrCode.value = await generateQRCode(qr_code)
      }else {
        // 将地址转换为二维码图片
        redBookAndroidQrCode.value = await generateQRCode(qr_code.android)
        redBookIOSQrCode.value = await generateQRCode(qr_code.ios)
      }
      showQrCodeDialog.value = true
      showPublishDialog.value = false
    }else {
      ElMessage.error(response.data.msg)
    }
  } catch (error) {
    ElMessage.error('发布失败')
  }
}

const handlePublishCancel = () => {
  showPublishDialog.value = false
  // 重置表单
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [], // Reset to empty array for InputTag
    mount: 'none',
    dataAcquisition: true,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }
}

const handleQrCodeConfirm = () =>{
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [], // Reset to empty array for InputTag
    mount: 'none',
    dataAcquisition: true,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }
  douyinQrCode.value = ""
  redBookAndroidQrCode.value = ""
  redBookIOSQrCode.value = ""
  showQrCodeDialog.value = false;
}

const handleChooseCityKeyWord = async () => {
  if(!publishForm.value.poi1){
    ElMessage.warning("请输入关键词")
    return
  }
  if(!publishForm.value.poi2){
    ElMessage.warning("请输入城市")
    return
  }
  const res = await axiosUtil.post('api/scan_publish/douyin/search_poi', {
    "keyword": publishForm.value.poi1,
    "city": publishForm.value.poi2
  })
  if(res.data.code){
    cityData.value = []
    res.data.code.forEach(item=>{
      const son = {
        value: item.poi_id,
        label: item.province  + item.city + item.district + item.address,
      }
      cityData.value.push(son)
    })
  }
}

// 生成二维码的函数
const generateQRCode = async (text: string): Promise<string> => {
  try {
    const qrCodeDataUrl = await QRCode.toDataURL(text, {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })
    return qrCodeDataUrl
  } catch (error) {
    console.error('生成二维码失败:', error)
    return ''
  }
}
</script>

<style scoped>
.page-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    backdrop-filter: blur(10px);
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
    border-radius: 8px;
    box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    position: relative;
    overflow: hidden;
}

.top-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
}

.right-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-type {
    width: 120px;
}

.search-input {
    width: 200px;
}

/* 自定义按钮样式 */
.custom-button {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

.custom-button:hover {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.4)"') !important;
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
}

/* 自定义下拉框样式 */
.custom-select :deep(.el-input__wrapper) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    box-shadow: none !important;
}

.custom-select :deep(.el-input__inner) {
    color: #fff !important;
}

.custom-select :deep(.el-input__wrapper:hover) {
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
}

/* 自定义输入框样式 */
.custom-input :deep(.el-input__wrapper) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    box-shadow: none !important;
}

.custom-input :deep(.el-input__inner) {
    color: #fff !important;
}

.custom-input :deep(.el-input__wrapper:hover) {
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
}

/* 下拉选项样式 */
:deep(.el-select-dropdown) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.95)" : "rgba(0, 20, 40, 0.95)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 255, 255, 0.3)"') !important;
    backdrop-filter: blur(10px);
}

:deep(.el-select-dropdown__item) {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
    background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 255, 255, 0.15)"') !important;
    color: v-bind('theme === "light" ? "#000" : "#fff"') !important;
}

:deep(.el-select-dropdown__item.selected) {
    background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 255, 255, 0.2)"') !important;
    color: v-bind('theme === "light" ? "#000" : "#fff"') !important;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    min-height: 0;
    overflow: hidden;
}

.content-list {
    flex: 1;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
    border-radius: 12px;
    box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
    padding: 24px;
    overflow-y: auto;
    margin-bottom: 16px;
}

/* 自定义滚动条样式 */
.content-list::-webkit-scrollbar {
    width: 6px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 20, 40, 0.3)"');
}

.content-list::-webkit-scrollbar-thumb {
    background: v-bind('theme === "light" ? "linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2))" : "linear-gradient(180deg, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.2))"');
    border-radius: 3px;
    border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
    box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 255, 255, 0.2)"');
}

.content-list::-webkit-scrollbar-thumb:hover {
    background: v-bind('theme === "light" ? "linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3))" : "linear-gradient(180deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.3))"');
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
}

.content-list::-webkit-scrollbar-track {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 20, 40, 0.2)"');
    border-radius: 3px;
    border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 255, 255, 0.1)"');
}

.pretty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 260px;
    min-height: 340px;
    background: rgba(255,255,255,0.18);
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.24);
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    transition: box-shadow 0.3s, transform 0.3s;
}
.pretty-card:hover {
    box-shadow: 0 12px 36px 0 rgba(31, 38, 135, 0.28);
    transform: translateY(-4px) scale(1.03);
}
.pretty-img-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 12px 8px 12px;
    box-sizing: border-box;
    background: transparent;
}
.pretty-img {
    max-width: 90%;
    max-height: 320px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    background: #f8fafc;
    object-fit: contain;
    border: 1.5px solid rgba(255,255,255,0.18);
}
.pretty-time-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 12px;
    margin-top: 8px;
}
.pretty-time {
    font-size: 0.92em;
    color: #6c757d;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
    padding: 2px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.pagination-bar {
    padding: 16px 0;
    display: flex;
    justify-content: flex-end;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
    border-radius: 12px;
    box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
}

.select-all-checkbox {
    margin-right: 12px;
}

.select-all-checkbox :deep(.el-checkbox__label) {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.card-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

.card-checkbox :deep(.el-checkbox__inner) {
    background-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 40, 80, 0.4)"');
    border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
}

.card-checkbox :deep(.el-checkbox__inner:hover) {
    border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 255, 255, 0.5)"');
}

.card-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
    border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 255, 255, 0.5)"');
}

@media (max-width: 1200px) {
    .pretty-card {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .pretty-card {
        width: 220px;
    }
}

/* 发布设置弹窗样式 */
.publish-form {
    padding: 20px;
}

.form-section {
    margin-bottom: 24px;
}

.section-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.publish-type-buttons {
    display: flex;
    gap: 12px;
}

.type-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #606266;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.type-btn:hover {
    border-color: #409eff;
    color: #409eff;
}

.type-btn.active {
    background: #409eff;
    border-color: #409eff;
    color: #fff;
}

.form-input {
    width: 100%;
}

.form-tip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
}

.mount-buttons {
    display: flex;
    gap: 12px;
}

.mount-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #606266;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
}

.mount-btn:hover {
    border-color: #409eff;
    color: #409eff;
}

.mount-btn.active {
    background: #409eff;
    border-color: #409eff;
    color: #fff;
}

.data-acquisition-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scan-limit-input {
    width: 120px;
}

/* 二维码显示样式 */
.qr-code-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.qr-code-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.qr-code-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
}

.qr-code-image {
    width: 150px;
    height: 150px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 下载相关样式 */
.popover-download-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.download-btn {
    flex: 1 1 0;
    min-width: 100px;
}
</style>
